<template>
  <div class = "sing-list-container">
    <!--封面容器-->
    <div @click = "showBoutique" class = "cover">
      <!--封面内容-->
      <div class = "cover-content">
        <!--图片-->
        <el-avatar shape = "square" :size = "110" :src = "logo"></el-avatar>
        <!--描述-->
        <div class = "cover-describe-container">
          <div class = "cover-describe">
            <div class = "cover-boutique">
              <i-crown-three theme = "outline" size = "17" fill = "#e6a95a" strokeLinejoin = "miter" />
              <span>精品歌单</span>
            </div>
            <span>我是狂拽酷炫吊炸天的描述</span>
          </div>
        </div>
      </div>
    </div>
    <!--歌单列表和索引-->
    <div class = "sing-list">
      <!--索引-->
      <div class = "list-nav">
        <!--全部索引-->
        <category-popover-two-layer :navList = "navList" :selectedTag = "selectedTag" :placement = "1" />
        <!--静态索引 Static navigation-->
        <category-static-navigation :navTagList = "navTagList" />
      </div>
      <!--歌单列表-->
      <div>
        <ul class = "song-list-item-ul">
          <router-link to = "/" class = "song-item-li" v-for = "item in songList" :key = "item">
            <div style = "width: 100%; ">
              <el-image style = "width:100%;height: 80%" fit = "fill" :src = "logo" />
              <span>{{ item.name }}</span>
            </div>
          </router-link>
        </ul>
      </div>
      <!--分页器-->
      <el-pagination
          style = "margin: 0 auto"
          v-model:currentPage = "currentPage"
          :page-size = "100"
          :total = "1000"
          :small = "false"
          layout = " prev, pager, next"
          @current-change = "handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import logo from '@/assets/logo.png'
import {ref} from "vue";
import CategoryPopoverTwoLayer from "@/components/reuse/CategoryPopoverTwoLayer";
import CategoryStaticNavigation from '@/components/reuse/CategoryStaticNavigation'

const emit = defineEmits(['showBoutiqueList'])

//封面跳转精品歌单
function showBoutique() {
  emit('showBoutiqueList')
}

const navTagList = ['华语', '流行', '摇滚', '民谣', '还有', '什么']
let selectedTag = ref('华语')
const navList = [
  {
    category1Name: '语种',
    category1List: [
      {
        category2Id: 1,
        category2Name: '华语',
      }, {
        category2Id: 1,
        category2Name: '华语',
      },
      {
        category2Id: 1,
        category2Name: '华语',
      }, {
        category2Id: 1,
        category2Name: '华语',
      }, {
        category2Id: 1,
        category2Name: '华语',
      }, {
        category2Id: 1,
        category2Name: '华语',
      }, {
        category2Id: 1,
        category2Name: '华语',
      }, {
        category2Id: 1,
        category2Name: '华语',
      }, {
        category2Id: 1,
        category2Name: '华语',
      }, {
        category2Id: 1,
        category2Name: '华语',
      }, {
        category2Id: 1,
        category2Name: '华语',
      },
      {
        category2Id: 1,
        category2Name: '华语',
      }
    ]
  },
  {
    category1Name: '语种',
    category1List: [
      {
        category2Id: 1,
        category2Name: '华语',
      }, {
        category2Id: 1,
        category2Name: '华语',
      }, {
        category2Id: 1,
        category2Name: '华语',
      }, {
        category2Id: 1,
        category2Name: '华语',
      }
    ]
  },
  {
    category1Name: '语种',
    category1List: [
      {
        category2Id: 1,
        category2Name: '华语',
      }, {
        category2Id: 1,
        category2Name: '华语',
      }, {
        category2Id: 1,
        category2Name: '华语',
      }, {
        category2Id: 1,
        category2Name: '华语',
      }
    ]
  },
]
const songList = [
  {
    name: '日系一夏|清新日音带来凉爽一夏',
    author: '云音乐官方',
    imgUrl: logo
  },
  {
    name: '日系一夏|清新日音带来凉爽一夏',
    author: '云音乐官方',
    imgUrl: logo
  },
  {
    name: '日系一夏|清新日音带来凉爽一夏',
    author: '云音乐官方',
    imgUrl: logo
  },
  {
    name: '日系一夏|清新日音带来凉爽一夏',
    author: '云音乐官方',
    imgUrl: logo
  },
  {
    name: '日系一夏|清新日音带来凉爽一夏',
    author: '云音乐官方',
    imgUrl: logo
  },
  {
    name: '日系一夏|清新日音带来凉爽一夏',
    author: '云音乐官方',
    imgUrl: logo
  },
  {
    name: '日系一夏|清新日音带来凉爽一夏',
    author: '云音乐官方',
    imgUrl: logo
  },
  {
    name: '日系一夏|清新日音带来凉爽一夏',
    author: '云音乐官方',
    imgUrl: logo
  },
  {
    name: '日系一夏|清新日音带来凉爽一夏',
    author: '云音乐官方',
    imgUrl: logo
  }
]

//分页器数据
let currentPage = ref(1)
const handleCurrentChange = (val) => {
  currentPage = val
}
</script>

<style lang = "less" scoped>
.sing-list-container {

  //精品歌单
  .cover {
    width: 100%;
    height: 20vh;
    display: block;
    background-color: rgb(113, 121, 127);
    border-radius: 10px;

    .cover-content {
      height: 100%;
      display: flex;
      align-items: center;
      padding: 10px 12px;
    }

    .cover-describe-container {
      height: 100%;

      .cover-describe {
        margin: 0 10px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        .cover-boutique {
          display: flex;
          line-height: 17px;
          margin: 15px 0;
          font-size: 10px;
          color: #e6a95a;
          padding: 5px 9px;
          border: 2px solid #e6a95a;
          border-radius: 20px;
        }

      }
    }

  }

  //歌单列表和索引
  .sing-list {
    display: flex;
    flex-direction: column;

    //索引
    .list-nav {
      display: flex;
      justify-content: space-between;
      margin: 15px 0;


    }

    //歌单列表
    .song-list-item-ul {
      flex-wrap: wrap;
      display: flex;


      .song-item-li {
        padding-left: 10px;
        padding-bottom: 15px;
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 0 0 20%;

        span {
          font-size: 12px;
        }
      }
    }
  }
}
</style>
